<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>背景发光效果制作，背景灯光动态图</title>
    <style>
        * {
        box-sizing: border-box;
        }

        html,
        body {
        margin: 0 auto;
        height: 100%;
        }

        body {
        display: flex;
        align-items: center;
        font-family: monospace;
        justify-content: center;
        background-color: #1d212b;
        }

        div {
        position: relative;
        width: 80vw;
        height: 30vw;
        line-height: 30vw;
        text-align: center;
        color: #252B37;
        background-color: #151823;
        animation: textColor 10s ease infinite;
        font-size: 50px;
        }
        div:after {
        position: absolute;
        content: "";
        top: 5vw;
        left: 0;
        right: 0;
        z-index: -1;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        transform: scale(0.75);
        -webkit-filter: blur(5vw);
        -moz-filter: blur(5vw);
        -ms-filter: blur(5vw);
        filter: blur(5vw);
        background: linear-gradient(270deg, #0fffc1,
                     #7e0fff);
        background-size: 200% 200%;
        animation: animateGlow 10s ease infinite;
        }
        @keyframes animateGlow {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
        }
        @keyframes textColor {
        0% {
            color: #7e0fff;
        }
        50% {
            color: #0fffc1;
        }
        100% {
            color: #7e0fff;
        }
        }
    </style>
</head>
<body>
<div>PHP中文网</div>
</body>
</html>